<template>
<div class="editor-box">
    <a-page-header class="page-header"
                   :sub-title="!isEdit?'添加一个篇新的文章':`编辑文章ID: [${id}]`"
                   @back="router.back()"
                   :title="`${isEdit?'编辑':'添加'}文章`"/>
  <a-spin :spinning="isEdit && loading"
          size="large"
          tip="loading...">
    <div class="editor-form">
      <a-form layout="vertical">
        <a-form-item label="标题">
          <a-input v-model:value="form.title"></a-input>
        </a-form-item>
        <a-form-item label="分类">
          <a-select v-model:value="form.classify_id">
            <a-select-option value="" title="默认分类">默认分类</a-select-option>
            <a-select-option v-for="classify in classifies"
                      :value="classify.id"
                      :title="classify.name">{{classify.name}}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="文章编辑">
          <v-md-editor class="md-editor" v-model="form.content" height="600px"></v-md-editor>
        </a-form-item>
        <a-form-item>
          <a-button type="primary" @click="save">保存</a-button>
        </a-form-item>
      </a-form>
    </div>
  </a-spin>
</div>
</template>

<script setup>
import {onMounted, ref} from "vue";
import {useRoute, useRouter} from "vue-router";
import {apiGet, apiPut, apiPost} from '../../../fentch'
import {message, notification} from "ant-design-vue";

const router = useRouter();
const route = useRoute()

const id = ref(0)
const isEdit = ref(false)
const loading = ref(false)

const form = ref({
  title: '',
  classify_id: '',
  content: ''
})

const classifies = ref([])

const save = () => {
  // 验证表单完整性
  if (form.value.title === '' || form.value.content === '') {
    notification.error({
      description: "请填写完整",
      message: "标题或内容不能为空!"
    })
    return
  }
  // 请求
  if (isEdit.value) {
    apiPut(`/blogs/${id.value}`, form.value).then(respHandle)
  } else {
    apiPost('/blogs', form.value).then(respHandle)
  }
}

const respHandle = res => {
  if (res.data.code === 0) {
    router.push('/admin/blog')
    return
  }
  notification.error({
    description: '服务器响应错误',
    message: res.data.message
  })
}

const loadBlog = () => {
  apiGet(`/blogs/${id.value}`).then(res => {
    if (res.data.code === 0) {
      let data = res.data.data
      form.value.title = data.title
      form.value.classify_id = data.classify_id
      form.value.content = data.content
      loading.value = false
      return
    }
    notification.error({
      description: '请求错误',
      message: res.data.message
    })
  })
}

const loadClassify = () => {
  apiGet('/classify').then(res => {
    if (res.data.code === 0) {
      classifies.value = res.data.data
      return
    }
    message.error(res.data.message)
  })
}

onMounted(() => {
  // 处理编辑与新建
  if (route.query.id !== undefined) {
    id.value = parseInt(route.query.id)
    isEdit.value = true
    loading.value = true
    loadBlog()
  }

  loadClassify()
})
</script>

<style scoped>

.md-editor {
}

.editor-form {
  margin-top: 20px;
}

.page-header {
  padding: 0;
}
</style>